import React, { useState, useEffect } from 'react'
import { View, Image, Text } from '@tarojs/components'
import ToLogin from '../../compontents/toLogin'
import Taro, { useDidShow, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import useModel from 'flooks';
import store from '../../stores/index'
import api from '../../http/api'
const { ajaxUType, ajaxTopBusiness } = api
import { AtTag } from 'taro-ui'
import "taro-ui/dist/style/components/tag.scss";
import './index.less'
import Navbar from '../../compontents/navbar/index'


export default (props: any) => {
  const [isIphoneX, setIsIphoneX] = useState(false)
  const { typeAllChange } = useModel(store.typeAll, ['typeAll'])
  const info: any = Taro.getStorageSync('info')
  const uSchoolId = info ? JSON.parse(info).userInfo.uSchoolId : 0
  // 一级分类列表
  const [typeList, setTypeList] = useState([])
  // 爆款区列表
  const [shopList, setShopList] = useState([{ "id": 2, "name": "美食爆款区", "uSchoolId": 1, "children": [{ "id": 20, "manageId": 11, "uSchoolId": 1, "businessManageId": 34, "userName": "18171873020", "title": "三不牛腩", "src": "https://static.zhongningwenhua.com/uniSchool/upload/f0f08461f185c02bb61ac07789a7437d.png", "url": "https://static.zhongningwenhua.com/uniSchool/upload/f0f08461f185c02bb61ac07789a7437d.png", "time": "2021-04-13T07:40:43.000Z", "uType": 1, "tel": "13321280684", "name": "", "address": "咸安区银泉大道84号", "endTime": "2021-04-30T07:39:30.000Z", "businessTime": "早上09:30-晚上09:30", "buyNotice": "<p><img src=\"https://static.zhongningwenhua.com/uniSchool/upload/3b6bac853025f1fa0c0a1f82caf48c59.png\" style=\"max-width:100%;\"><br></p>", "detail": "<p><img src=\"https://static.zhongningwenhua.com/uniSchool/upload/9b9995080e9f490ea1256e5f1e7a319d.png\" style=\"max-width:100%;\"><br></p>", "isGrounding": 1, "ord": 0, "topNum": 2, "longitude": "", "latitude": "", "price": "158", "priceOld": "300", "num": 0, "numTotal": 200, "topIco": "https://static.zhongningwenhua.com/uniSchool/img/uShopIco.png" }] }])
  const [version, setVersion] = useState(0)
  useDidShow(() => {
    api.version().then((res: any) => {
      const version = res.data
      setVersion(version)
      if (version === 1) {
        getUType()
        getTopBusiness()
      }
    })
  })
  useEffect(()=>{
    Taro.getSystemInfo({
      success: res => {
        if (res.safeArea.top > 20) {
          setIsIphoneX(true)
        }
      }
    }).then()
  },[])
  useShareAppMessage(res => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: 'U选商家',
      path: '/pages/uBusiness/index'
    }
  })
  useShareTimeline(() => {
    return {
      title: 'U选商家',
      path: '/pages/uBusiness/index'
    }
  })
  // 页面跳转
  const toPage = (path: any) => {
    Taro.navigateTo({
      url: path
    })
  }
  // 获取一级分类
  const getUType = () => {
    ajaxUType().then((res: any) => {
      const { data } = res
      setTypeList(data)
      typeAllChange(data)
    })
  }
  // 获取爆款区列表
  const getTopBusiness = () => {
    ajaxTopBusiness({ uSchoolId }).then((res: any) => {
      const { data } = res
      setShopList(data)
    })
  }

  const formatDiscount = (p1, p2) => {
    const str = (Math.round(p1 / p2 * 10 * Math.pow(10, 1)) / Math.pow(10, 1)).toFixed(1)
    return str
  }

  return (
    <View className={isIphoneX ? ' wrapX uBusiness flex flex-direction' : 'uBusiness flex flex-direction'}>
      <ToLogin url='/pages/uBusiness/index'></ToLogin>
      <View className='header'>
        <Image className='banner' src={IMGSRC + 'uBanner.png'} ></Image>
      </View>
      <View className='contentBox flex1'>
        {
          version ? <View className='typeUl'>
            {
              typeList.map((item: any, i: any) => (
                <View className='typeLi' onClick={() => { toPage(`/pages/uBusinessList/index?name=${item.name}&currents=${i}`) }}>
                  <Image className='ico' src={item.src} ></Image>
                  <View className='text'>{item.name}</View>
                </View>
              ))
            }
            {
              typeList.length ? <View className='typeLi' onClick={() => { toPage('/pages/businessEnter/index') }}>
                <Image className='ico' src={IMGSRC + 'uico_sjrz.png'} ></Image>
                <View className='text'>商家入驻</View>
              </View> : <View></View>
            }

          </View> : <View></View>
        }
        <View className='shopUl '>
          {
            shopList.map((item: any, i: any) => (
              <View className='shopLi'>
                <View className="title">
                  <Image className='t1' src={'https://static.zhongningwenhua.com/uniSchool/img/uShopIco.png'} ></Image>
                  <Text className="t2">{item.name}</Text>
                </View>
                {/* <Image onClick={() => { toPage(`/pages/uBusinessDetail/index?uBusinessId=${item.top[0].id}`) }} className='banner' src={item.children[0].src.split(',')[0]} ></Image> */}
                <View className='shopContUl'>
                  {
                    item.children.map((item2: any, i2: any) => (
                      <View className='shopContLi' onClick={() => { toPage(`/pages/uBusinessDetail/index?uBusinessId=${item2.id}`) }}>
                        <Image className='ico' src={item2.url.split(',')[0]} ></Image>
                        <View className="subTitle">{item2.title}</View>
                        <View className="price">
                          <Text className="priceNow">¥{item2.price}</Text>
                          <Text className="priceOld">¥{item2.priceOld}</Text>
                          <AtTag className='tagsC' type='primary' size='small' circle>{formatDiscount(item2.price, item2.priceOld)}折</AtTag>
                        </View>
                      </View>
                    ))
                  }
                </View>
              </View>
            ))
          }

        </View>
      </View>

      <Navbar></Navbar>
    </View>
  );
};
